<script setup>
import { ref } from 'vue';

const modal = ref(false)
</script>
<template>
    <el-button type="primary" plain @click="modal = true;">开启</el-button>
    <Transition name="slide-fade">
        <Teleport to="body" v-if="modal">
            <div class="modal">
                这是被绑定到 body 上的 modal
                <el-button type="primary" class="close-btn" plain @click="modal = false;">关闭</el-button>
            </div>
        </Teleport>
    </Transition>
</template>
<style lang="less" scoped>
.modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    border-radius: 5px;
    padding: 10px;
    padding-bottom: 52px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
    max-width: calc(100vw - 30px);
    max-height: calc(100vh - 30px);
    min-width: 300px;
    min-height: 200px;
    overflow: auto;

    .close-btn {
        display: block;
        margin-left: auto;
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
}


.slide-fade-enter-active {
    transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
    transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translate(20px, -50%);
    opacity: 0;
}
</style>